<template>
	<div class="banxin">
		<div class="my-qingqiu">			 
			<myqingqiu-button></myqingqiu-button>			
		</div>
	</div>
</template>

<script type="text/javascript">
	import Vue from 'vue'
	Vue.component('myqingqiu-button',{
	 	data:function(){
	 		return {
	 			counter:0,
	 			sites: []
	 		}
	 	},
	 	template:`<div><button @click="myliudada">{{counter}}</button>
	 	<ol>
		    <li v-for="site in sites">
		      {{ site.id}}:{{site.name}}
		    </li>
 		</ol></div>`,
	 	methods:{
		 	myliudada(){
				 this.axios.post('http://www.lyznb.cn/api/category/getList', {
				  })
				  .then(function (response) {
				  	console.log(response)
				  	var arr = response.data.data;			  	 			  	
				  	this.sites = arr
				  	//console.log(this);
				  }.bind(this))//如果没有绑定this应该是全局window
				  .catch(function (error) {
				    console.log(error);
				  });
				  this.counter+=1
		 	}

		 	//resource写的post请求
		 	/*myliudada(){
					var url = 'http://www.lyznb.cn/api/category/getList';
					//发送post请求，必须设置emulateJSON:true
					//设置请求头中的content-type 为常见的www.形式
					this.$http.post(url,{content:'xxxxx'},{emulateJSON:true})
					.then(function(response){
						console.log(response)
						var Arraydata = response.body.data
						this.sites = Arraydata
					},function(){
						console.log('发送数据失败');
					});
					this.counter+=1
				}*/

				//resource写的get请求
				/*myliudada(){
					var url = 'http://127.0.0.1:8899/api/getcomments/43?pageindex=1';
					//发送post请求，必须设置emulateJSON:true
					//设置请求头中的content-type 为常见的www.形式
					this.$http.get(url).then(function(response){
						this.sites = response.body.data
					},function(){
						console.log('获取数据失败')
					})					
				}*/
	    	}
	     })
	export default{		   
 		data(){
			 return {
				 value:[20,50]
			 }
		 }
	}
</script>

<style type="text/css">
	.my-qingqiu{
		height: 200px;
		background: red
	}
</style>